created: 2025-03-30Better Callouts Documentation
Better Callouts is an Obsidian plugin that lets you create, edit, and manage custom callout styles visually — no CSS knowledge needed. It handles everything for you, including automatic snippet generation.
.obsidian/snippets/betterCallouts.css up to date.obsidian/plugins/ (if it doesnt exist yet create the folder)https://github.com/hannesschacherl/better-callouts.git
CSS-File)BetterCallouts (This applies all styles created by the plugin to your notes)If you use Obsidian Publish:
.obsidian/snippets/betterCallouts.css to your publish.css file for them to work on the published Obsidian.obsidian/snippets/ folder and runs a shell script to merge the files into your publish.css when detecting changesc-new appearsAccepted colors:
red, blue, darkgreen)#ffcc00, #123456)rgb(255, 0, 0), rgba(0, 128, 255, 0.2))hsl(200, 100%, 50%), hsla(0, 100%, 50%, 0.5))var(--text-accent), var(--color-base-40))if you use something like var(--some-var) and forget the closing ) other callouts may stop working.
Input validation is planned for the future but currently not active.
The Plugin uses the following files:
Vault
├── .obsidian
│ ├── plugins
│ │ ├── better-callouts
│ │ │ ├── data.json
│ │ │ ├── main.js
│ │ │ └── manifest.json
│ ├── snippets
│ │ ├── betterCallouts.css
plugins > better-callouts > main.js: here is the logic for everything this plugin does
plugins > better-callouts > data.json: here are all your custom callouts stored
plugins > better-callouts > manifest.json: tells obsidian information about this plugin
snippets > betterCallouts.css: this is the automatically generated CSS-File
Now you've set up the plugin to work for all your custom callouts.
You can insert them into your file using code like this:
> [!c-my-callout] Title
> Content
The Title ([!c-my-callout]) for the callout you want to add is displayed in the settings screen of this plugin.
If you want an even easier way for inserting the callouts you can:
CTRL / CMD + P (to open the command palette)Better Callouts: Insert better callout (only works when in edit mode)